
<h3 mat-dialog-title class="mb-0">Import <span class="d-md-inline d-none">training data</span> for '{{data.type}}' model</h3>

<div mat-dialog-content class="content">

  <mat-tab-group
    mat-stretch-tabs
    dynamicHeight
    animationDuration="0ms">

    <mat-tab>

      <ng-template mat-tab-label>
        Crawl
      </ng-template>

      <form (ngSubmit)="importUrl()" class="row px-3">

        <div class="col-12 mb-3 mt-4">

          <p class="text-muted text-small">
            Crawl and scrape the specified URL for training data.
          </p>

          <mat-form-field class="standalone-field w-100">
            <span
              matPrefix
              matTooltip="Root URL to crawl for training data"
              class="d-flex flex-nowrap align-items-center justify-content-between me-2">
              <mat-icon>http</mat-icon>
              <span class="text-muted">|</span>
            </span>
            <input
              matInput
              placeholder="Website URL"
              [(ngModel)]="url"
              name="url"
              autocomplete="off">
          </mat-form-field>
      
        </div>

        <div class="col-12">

          <div class="d-flex justify-content-md-between align-items-md-center align-items-end flex-md-row w-100 mb-3">

            <mat-form-field class="standalone-field me-2 w-100">
              <span
                matPrefix
                matTooltip="Delay in seconds between pages"
                class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                <mat-icon>hourglass_empty</mat-icon>
                <span class="text-muted">|</span>
              </span>
              <input
                matInput
                placeholder="Delay"
                [(ngModel)]="delay"
                type="number"
                min="1"
                max="30"
                step="1"
                name="delay"
                autocomplete="off">
            </mat-form-field>

            <mat-form-field class="standalone-field me-2 w-100">
              <span
                matPrefix
                matTooltip="Maximum number of URLs to crawl"
                class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                <mat-icon>exit_to_app</mat-icon>
                <span class="text-muted">|</span>
              </span>
              <input
                matInput
                placeholder="Max URLs"
                [(ngModel)]="max"
                type="number"
                min="1"
                max="5000"
                step="1"
                name="max"
                autocomplete="off">
            </mat-form-field>

            <mat-form-field class="standalone-field me-2 w-100">
              <span
                matPrefix
                matTooltip="Minimum character count for completions"
                class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                <mat-icon>timeline</mat-icon>
                <span class="text-muted">|</span>
              </span>
              <input
                matInput
                placeholder="Text length threshold"
                [(ngModel)]="threshold"
                type="number"
                min="25"
                max="500"
                step="25"
                name="threshold"
                autocomplete="off">
            </mat-form-field>

            <mat-form-field class="standalone-field me-2 w-100">
              <span
                matPrefix
                matTooltip="Meta value to associate snippets with"
                class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                <mat-icon>edit</mat-icon>
                <span class="text-muted">|</span>
              </span>
              <input
                matInput
                placeholder="Meta value ..."
                [(ngModel)]="meta"
                name="meta"
                autocomplete="off">
            </mat-form-field>

            <button
              class="px-3"
              matTooltip="Start crawling website"
              mat-flat-button
              color="primary">
              Crawl
            </button>

          </div>
      
        </div>

      </form>

      <div class="text-end me-2">

        <mat-slide-toggle
          labelPosition="before"
          class="me-5"
          matTooltip="Import lists"
          [disabled]="uploading"
          [(ngModel)]="lists">
          Lists
        </mat-slide-toggle>

        <mat-slide-toggle
          labelPosition="before"
          class="me-5"
          matTooltip="Import code segments"
          [disabled]="uploading"
          [(ngModel)]="code">
          Code
        </mat-slide-toggle>

        <mat-slide-toggle
          labelPosition="before"
          class="me-5"
          matTooltip="Import images"
          [disabled]="uploading"
          [(ngModel)]="images">
          Images
        </mat-slide-toggle>

        <mat-slide-toggle
          labelPosition="before"
          class="me-5"
          matTooltip="Summarize training snippets that are too long to be effectively used"
          [disabled]="uploading"
          [(ngModel)]="summarize">
          Summarize
        </mat-slide-toggle>

        <mat-slide-toggle
          labelPosition="before"
          class="me-2"
          matTooltip="Inserts the source URL into the completion for each training snippet created."
          [disabled]="uploading"
          [(ngModel)]="insert_url">
          Insert URL
        </mat-slide-toggle>

      </div>

    </mat-tab>

    <mat-tab>

      <ng-template mat-tab-label>
        Training data
      </ng-template>

      <!-- Upload training data part XML/JSON/YAML/CVS -->
      <div class="row px-3">
  
        <div class="col-12 mt-4 mb-3">

          <p class="text-muted text-small">
            Upload XML, JSON, YAML, or CSV files as training data. Notice, this will only import two columns from your files; prompt and completion.
          </p>

          <div class="row">
            <div class="col-md-6 col-12">

              <mat-form-field class="w-100 standalone-field me-2">
                <span
                  matPrefix
                  matTooltip="Name of prompt field in your file(s)"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Prompt field"
                  [disabled]="uploading"
                  [(ngModel)]="prompt"
                  autocomplete="off">
              </mat-form-field>

            </div>
            <div class="col-md-6 col-12">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Name of completion field in your file(s)"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>edit</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Completion field"
                  [disabled]="uploading"
                  [(ngModel)]="completion"
                  autocomplete="off">
              </mat-form-field>
        
            </div>
          </div>
        </div>

        <div class="col-12 mt-2">
      
          <div class="drop-container pointer border-color">

            <input
              type="file"
              [(ngModel)]="trainingFileModel"
              multiple
              class="w-100 h-100 hide pointer"
              #upload
              (change)="getFile($event)"
              accept=".csv,.xml,.yaml,.yml,.json">

            <button
              mat-button
              class="w-100 pt-2"
              (click)="upload.click()"
              *ngIf="trainingFileModel === ''"
              [disabled]="uploading">
              <i>Drag & drop your training files here, CSV, XML, JSON or YAML</i> <br />
              <span class="text-primary">Choose one or more files</span>
            </button>

            <ng-container *ngIf="trainingFileModel !== ''">
              <h4 class="mb-0 mt-3 text-center">{{getFileName()}}</h4>
              <p class="text-center mt-3" *ngIf="uploading">Uploading {{uploadIndex + 1}} of {{files.length}}...</p>
              <p class="text-center mt-3" *ngIf="!uploading">Done!</p>
            </ng-container>

          </div>
      
        </div>

      </div>
    </mat-tab>

    <mat-tab>

      <ng-template mat-tab-label>
        Generic CSV
      </ng-template>

      <!-- Upload CVS file -->
      <div class="row px-3">
  
        <div class="col-12 mt-4">

          <p class="text-muted text-small">
            Upload CSV files with generic columns. The first column is assumed to be the prompt, and all other columns will become part of the completion.
          </p>
        </div>

        <div class="col-12">
      
          <div class="drop-container pointer border-color">

            <input
              type="file"
              [(ngModel)]="trainingFileModelCsv"
              multiple
              class="w-100 h-100 hide pointer"
              #uploadCsv
              (change)="getFileCsv($event)"
              accept=".csv">

            <button
              mat-button
              class="w-100 pt-2"
              (click)="uploadCsv.click()"
              *ngIf="trainingFileModelCsv === ''"
              [disabled]="uploading">
              <i>Drag & drop your CSV files here</i> <br />
              <span class="text-primary">Choose one or more file</span>
            </button>

            <ng-container *ngIf="trainingFileModelCsv !== ''">
              <h4 class="mb-0 mt-3 text-center">{{getFileName()}}</h4>
              <p class="text-center mt-3" *ngIf="uploading">Uploading {{uploadIndex + 1}} of {{files.length}}...</p>
              <p class="text-center mt-3" *ngIf="!uploading">Done!</p>
            </ng-container>

          </div>
      
        </div>

      </div>
    </mat-tab>

    <mat-tab>

      <ng-template mat-tab-label>
        URL set
      </ng-template>

      <!-- Upload CVS file -->
      <div class="row px-3">
  
        <div class="col-12 mt-4">

          <p class="text-muted text-small">
            Upload CSV files with a list of URLs. Notice, the CSV file must have only one column and have a header column.
          </p>
        </div>

        <div class="col-12 mt-2 mb-4">

          <mat-checkbox
            color="primary"
            class="mt-md-0 mt-1 me-3"
            matTooltip="Improve RAG and VSS lookups by creating summary prompts for each individual training snippet generated from file(s)"
            [(ngModel)]="vectorize">
            Vectorize
          </mat-checkbox>

        </div>

        <div class="col-12 mt-3">
      
          <div class="drop-container pointer border-color">

            <input
              type="file"
              [(ngModel)]="urlList"
              class="w-100 h-100 hide pointer"
              #uploadUrlList
              (change)="getUrlList($event)"
              accept=".csv">

            <button
              mat-button
              class="w-100 pt-2"
              (click)="uploadUrlList.click()"
              *ngIf="trainingFileModelCsv === ''"
              [disabled]="uploading">
              <i>Drag & drop your CSV file here</i> <br />
              <span class="text-primary">Choose one CSV file</span>
            </button>

          </div>
      
        </div>

      </div>
    </mat-tab>

    <mat-tab>

      <ng-template mat-tab-label>
        Text
      </ng-template>

      <!-- Upload TXT training data part -->
      <div class="row px-3">
  
        <div class="col-12 mt-4 mb-3">

          <p class="text-muted text-small">
            Upload text files as training data, such as .txt files, .md files, or .csv files as plain text. Optionally create a summary prompt to increase retrieval quality.
          </p>

          <div class="row">

            <div class="col-12 mt-2 mb-4">

              <mat-checkbox
                color="primary"
                class="mt-md-0 mt-1 me-3"
                matTooltip="Improve RAG and VSS lookups by creating summary prompts for each individual training snippet generated from file(s)"
                [(ngModel)]="summarizeTxtFile">
                Summary prompt
              </mat-checkbox>

            </div>

            <div class="col-12 mt-3">
          
              <div class="drop-container pointer border-color">

                <input
                  type="file"
                  [(ngModel)]="trainingFileModel"
                  multiple
                  class="w-100 h-100 hide pointer"
                  #uploadTxt
                  (change)="getFile($event, true)"
                  accept=".txt,.md,.csv">

                <button
                  mat-button
                  class="w-100 pt-2"
                  (click)="uploadTxt.click()"
                  *ngIf="trainingFileModel === ''"
                  [disabled]="uploading">
                  <i>Drag & drop your text-based training files here</i> <br />
                  <span class="text-primary">Choose one or more files</span>
                </button>

                <ng-container *ngIf="trainingFileModel !== ''">
                  <h4 class="mb-0 mt-3 text-center">{{getFileName()}}</h4>
                  <p class="text-center mt-3" *ngIf="uploading">Uploading {{uploadIndex + 1}} of {{files.length}}...</p>
                  <p class="text-center mt-3" *ngIf="!uploading">Done!</p>
                </ng-container>

              </div>
          
            </div>

          </div>
        </div>
      </div>
    </mat-tab>


    <mat-tab>

      <ng-template mat-tab-label>
        Images
      </ng-template>

      <!-- Upload TXT training data part -->
      <div class="row px-3">
  
        <div class="col-12 mt-4 mb-3">

          <p class="text-muted text-small">
            Upload images as training data to have your AI Agent or AI Chatbot display images inline into the conversation.
          </p>

          <div class="row">

            <div class="col-12">
          
              <div class="drop-container pointer border-color">

                <input
                  type="file"
                  [(ngModel)]="imageFileModel"
                  multiple
                  class="w-100 h-100 hide pointer"
                  #uploadImages
                  (change)="getImageFile($event)"
                  accept=".png,.jpg,.jpeg,.webp,.gif">

                <button
                  mat-button
                  class="w-100 pt-2"
                  (click)="uploadImages.click()"
                  *ngIf="imageFileModel === ''"
                  [disabled]="uploading">
                  <i>Drag & drop your image training files here</i> <br />
                  <span class="text-primary">Choose one or more files</span>
                </button>

                <ng-container *ngIf="trainingFileModel !== ''">
                  <h4 class="mb-0 mt-3 text-center">{{getFileName()}}</h4>
                  <p class="text-center mt-3" *ngIf="uploading">Uploading {{uploadIndex + 1}} of {{files.length}}...</p>
                  <p class="text-center mt-3" *ngIf="!uploading">Done!</p>
                </ng-container>

              </div>
          
            </div>

          </div>
        </div>
      </div>
    </mat-tab>

    <mat-tab>

      <ng-template mat-tab-label>
        PDF
      </ng-template>

      <!-- Upload PDF training data files -->
      <div class="row px-3">
  
        <div class="col-12 mt-4 mb-3">

          <p class="text-muted text-small">
            Upload PDF files as training data, and optionally massage your files using OpenAI before creating training snippets.
          </p>

          <div class="row">

            <div class="col-12 col-lg-4">

              <mat-checkbox
                color="primary"
                class="mt-md-0 mt-1 me-2"
                matTooltip="Create one training snippet for each page in file, and preserve page numbers snippets are taken from."
                [(ngModel)]="preservePages">
                Keep pages
              </mat-checkbox>

              <mat-checkbox
                color="primary"
                class="mt-md-0 mt-1 me-2"
                [disabled]="uploading"
                *ngIf="!preservePages"
                matTooltip="Improve RAG and VSS lookups by creating summary prompts for each individual training snippet generated from file(s). WARNING! This is NOT suitable for PDF files with hundreds of pages."
                [(ngModel)]="summarizePdfFile">
                Summarize
              </mat-checkbox>

              <mat-checkbox
                color="primary"
                class="mt-md-0 mt-1"
                [disabled]="uploading"
                matTooltip="Overwrites any existing files with the same filename. Notice, will not delete training snippets created from a file previously imported having the same filename, will only overwrite the physical file."
                [(ngModel)]="overwrite">
                Overwrite
              </mat-checkbox>

            </div>

            <div class="col-12 col-lg-4">

              <mat-form-field class="w-100 standalone-field me-lh-2" *ngIf="!preservePages">
                <span
                  matPrefix
                  matTooltip="Massage value used to summarize, and/or clean PDF data. WARNING! This is NOT suitable for PDF files with hundreds of pages."
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <input
                  matInput
                  placeholder="Massage value ..."
                  [disabled]="uploading"
                  [(ngModel)]="massage"
                  autocomplete="off">
              </mat-form-field>

            </div>

            <div class="col-12 col-lg-4">

              <mat-form-field class="w-100 standalone-field" *ngIf="!preservePages">
                <span
                  matPrefix
                  matTooltip="Example massage values. WARNING! This is NOT suitable for PDF files with hundreds of pages."
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>help_outline</mat-icon>
                  <span class="text-muted">|</span>
                </span>
                <mat-select
                  [(ngModel)]="massageTemplate"
                  placeholder="Example massage values ..."
                  (selectionChange)="massageTemplateChanged()">
                  <mat-option
                    *ngFor="let idx of massageTemplates"
                    [value]="idx">
                    {{idx}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

            </div>

            <div class="col-12 mt-4">
          
              <div class="drop-container pointer border-color">

                <input
                  type="file"
                  [(ngModel)]="trainingFileModel"
                  multiple
                  class="w-100 h-100 hide pointer"
                  #upload
                  (change)="getFile($event)"
                  accept=".pdf">

                <button
                  mat-button
                  class="w-100 pt-2"
                  (click)="upload.click()"
                  *ngIf="trainingFileModel === ''"
                  [disabled]="uploading">
                  <i>Drag & drop your PDF training files here</i> <br />
                  <span class="text-primary">Choose one or more files</span>
                </button>

                <ng-container *ngIf="trainingFileModel !== ''">
                  <h4 class="mb-0 mt-3 text-center">{{getFileName()}}</h4>
                  <p class="text-center mt-3" *ngIf="uploading">Uploading {{uploadIndex + 1}} of {{files.length}}...</p>
                  <p class="text-center mt-3" *ngIf="!uploading">Done!</p>
                </ng-container>

              </div>
          
            </div>

          </div>
        </div>
      </div>
    </mat-tab>

  </mat-tab-group>

</div>

<div mat-dialog-actions [align]="'end'">

  <button
    mat-flat-button
    color="primary"
    [disabled]="uploading"
    mat-dialog-close>
    Close
  </button>

</div>
